@charset "utf-8";





/* =全局CSS
------------------------------------------------------------ */

body{  font-family: "微软雅黑"; color:#606161; font-size: 14px;}
html{ width:100%; height:100%; overflow:hidden; position:fixed;  background:#305f0f; }
a { text-decoration:none; color:#fff;}
a:hover{ text-decoration:underline; }


.scrollBox{}
.scrollBox ul{position:fixed; z-index:1; top:240px; width:20000px;  left:100%;}
.scrollBox ul li{ float:left;transition:all .3s ease-in-out;  }
.scrollBox ul li div{ width:45px; height:74px; padding:0 10px; background:url(../images/magnifier/card.png) no-repeat center top; background-size:contain;}
.scrollBox ul li img{ display:none; margin:0 auto; height:100%;} 
.scrollBox ul li.first div{width:70px;  padding:0 30px;}
.scrollBox ul li.active div{ width:70px; height:110px; margin-top:-22px; padding:0 30px; }
.scrollBox ul li.active div img{ display:block;border-radius:10px}

.scrollBox ul li.beforePic div{}
.scrollBox ul li.beforePic div img{ display:block;}
 

.magnifier{ position:fixed;z-index:2; width:280px; height:280px; left:50%; top:180px; margin-left:-100px; background:url(../images/magnifier/fdj_1.png) no-repeat; background-size:contain; transition:all .3s ease-in-out;} 
.magnifier.active{background:url(../images/magnifier/fdj_2.png) no-repeat; background-size:contain; }
 

 
 

.sign{ position:fixed; z-index:9; width:200px;  top:60px; left:50%; margin-left:-100px; display:none; text-align:center;}
.sign.active{ display:block;}
.sign span{ display:block; overflow:hidden; padding-top:70px; color:#fff;  font-size:20px; background-size:70px;}
.sign_true{ background:url(../images/magnifier/sign_true.png) no-repeat center top;}
.sign_false{ background:url(../images/magnifier/sign_false.png) no-repeat center top; }
.beforeNum{ color:#fffc00; font-size:30px; font-weight:bold;}
 
.yes_btn{ position:fixed; left:50%; bottom:50px; z-index:99999; margin-left:-40px;  width:80px; height:40px;line-height:40px; font-size:22px; background:#fee040; color:#4e4c4f; border-radius:12px; text-align:center; cursor:pointer; transition: all 0.3s ease 0s; box-sizing:border-box; }
.yes_btn:hover{} 

.info{ position:fixed; color:#fff; text-align:center; width:100%; font-size:16px;bottom:30px;}
 .star_num_1,.star_num_2{ color:red; font-weight:bold;}
 
.game_level,.game_score{ overflow:hidden; position:fixed; top:10px;  border: 1px solid #1970c0; border-radius: 20px;background: #fff;box-shadow: 3px 3px 3px #242424; color: #1970c0; padding:0 12px; font-size:18px;}
.game_level{ left:10px;}
.game_score{ left:140px;}
.game_level_curr,.game_score_curr{ color:#ff8105;}

.user_exit{ width:30px; height:30px; background:url(../images/close.png); background-size:contain; position:fixed; right:10px; top:6px;}


          
.game_alert{ width:280px; height:250px;margin-left:-140px; margin-top:-125px; border-radius:10px; border:1px solid #fff; position:fixed; z-index:9999; left:50%; top:50%; overflow:hidden; background:#fff; display:none;}
.game_alert .title{ height:50px; line-height:50px; font-size:22px;  text-align:center;background: linear-gradient(to right, #2340fc , #117bff); color:#fff;display:block; }
.game_alert .content{ color:#404040; font-size:16px; line-height:24px; padding-top:20px; text-align:center;  position:relative;}
.game_alert .ok{ display:block; position:absolute; left:50%; bottom:10px; left:50%; margin-left:-100px; width:200px; height:40px;line-height:40px;cursor:pointer; background:#f59c28; border-radius:10px; color:#fff; text-align:center; font-size:18px;}
.game_alert .content span{ padding:10px 0; display:inline-block;}







@media (min-width: 320px) {

}


@media (min-width: 480px) {

}

@media (min-width: 768px) {		
	.scrollBox ul{top:250px;}
	.scrollBox ul li div{ width:60px; height:100px;}
	.scrollBox ul li.first div{ width:100px;padding:0 120px;}
	.scrollBox ul li.active div{ width:100px; height:165px; margin-top:-30px; padding:0 120px;}
	
	.magnifier{ width:390px; height:390px; top:170px; margin-left:-140px;}		
	

	.yes_btn{ margin-left:-100px;  width:200px;  height:50px; line-height:50px; font-size:24px;}
	.game_level,.game_score{font-size:18px;}
	.game_score{ left:10px; top:60px;}
	.game_level{ left:30px; top:20px;}
	.game_score{ left:30px; top:60px;}
	.user_exit{ top:25px; right:30px; width:40px; height:40px;}
	 
	.sign{top:40px;}
	.sign span{ padding-top:70px; font-size:20px; background-size:70px;}

	
	
}

@media (min-width: 1024px) { 
	.scrollBox ul{top:280px;}
	.scrollBox ul li div{ width:70px; height:110px;}
	.scrollBox ul li.first div{ width:120px;padding:0 150px;}
	.scrollBox ul li.active div{ width:120px; height:200px; margin-top:-45px; padding:0 150px;}

	.magnifier{ width:470px; height:470px;top:175px; margin-left:-165px;}
	
	.yes_btn{ bottom:20px;}
	
	.game_level{ left:30px; top:20px;}
	.game_score{ left:30px; top:60px;}
	.user_exit{ top:25px; right:30px; width:40px; height:40px;}

}

@media (min-width: 1280px) { 

	.game_level,.game_score{height:30px; line-height:30px; padding:0 30px;}
	
}


@media (min-width: 1366px) { 
	.scrollBox ul{top:280px;}
	.scrollBox ul li.first div{ padding:0 200px;}
	.scrollBox ul li.active div{  padding:0 200px;}

	
	.sign{top:30px;}
	
	
	.game_alert{width:330px; height:330px; margin-left:-168px;  margin-top:-168px;}
	.game_alert .title{ height:70px; line-height:70px; font-size:30px;  text-align:center;background: linear-gradient(to right, #2340fc , #117bff); color:#fff;display:block; }
	.game_alert .content{ font-size:20px; line-height:30px; padding-top:40px;}
	.game_alert .ok{ bottom:20px; height:50px;line-height:50px;font-size:20px;}
	
}

@media (min-width: 1440px) {
	.scrollBox ul{top:320px;}
	.scrollBox ul li div{ width:80px;height:130px;}
	.scrollBox ul li.first div{ width:140px; padding:0 200px;}
	.scrollBox ul li.active div{  width:140px; height:230px;margin-top:-50px;  padding:0 200px;}
	.magnifier{ width:540px; height:540px;top:200px; margin-left:-195px;}
	
	.game_level,.game_score{font-size:18px; left:100px; top:40px; height:40px; line-height:40px; padding:0 30px; font-size:26px;}
	.game_score{ top:110px;}	
	.user_exit{width:50px; height:50px; right:20px; top:50px;}
	
	.sign{top:50px;}
	.sign span{ padding-top:120px; font-size:22px; background-size:100px;}
	

}

@media (min-width: 1600px) {
	.scrollBox ul{top:350px;}
	.scrollBox ul li div{ width:100px;height:160px; padding:0 20px;}
	.scrollBox ul li.first div{ width:160px; padding:0 200px;}
	.scrollBox ul li.active div{ width:160px; height:260px; margin-top:-50px;  padding:0 200px;}
	.magnifier{ width:600px; height:600px;top:230px; margin-left:-210px;}
}

@media (min-width: 1880px) {
	.magnifier{}
}


